<template>
  <div class="w-full h-full flex flex-col">
    <div class="flex-none p-10px box-border text-lg border-b border-gray-200">我的文档</div>
    <div class="flex p-10px box-border border-b border-gray-200">
      <upload-file-button/>
      <div class="ml-10px">
        <new-build-button @click="maskActive = !maskActive"/>
      </div>
    </div>
    <div class="flex-1 flex p-10px box-border bg-gray-100 rounded overflow-hidden">
      <side-nav>
        <template #myCreated>
          <side-nav-file-name v-for="(file, index) of myCreatedFiles" :filename="file" :key="index"/>
        </template>
        <template #myFollowed>
          <div v-if="myFollowedFiles.length === 0" class="mt-10px">
            <no-content/>
          </div>
          <div v-else>
            <side-nav-file-name v-for="(file, index) of myFollowedFiles" :filename="file" :key="index"/>
          </div>
        </template>
        <template #myJoined>
          <div v-if="myJoinedFiles.length === 0" class="mt-10px">
            <no-content/>
          </div>
          <div v-else>
            <side-nav-file-name v-for="(file, index) of myJoinedFiles" :filename="file" :key="index"/>
          </div>
        </template>
      </side-nav>
      <div class="flex-1 bg-light-50 p-10px box-border">
        <router-view/>
      </div>
    </div>
    <new-build-file v-model:active="maskActive"/>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import UploadFileButton from "@/components/customButton/UploadFileButton.vue"
import NewBuildButton from "./components/NewBuildButton.vue"
import SideNav from "./components/SideNav.vue"
import SideNavFileName from "./components/SideNavFileName.vue"
import NewBuildFile from "./components/NewBuildFile.vue";
import NoContent from "@/components/viewComponents/NoContent.vue";

const myCreatedFiles = ref(["☝️文档使用说明"])
const myFollowedFiles = ref([])
const myJoinedFiles = ref([])

const maskActive = ref(false)
</script>

<style scoped>

</style>